<template>
  <div class="outer">
    <h1>Count</h1>
    <p>被计算的值{{ count }}/电影的数量{{movieList.length}}</p>
    <button @click="increment">累加</button>
    <button @click="decrement">累减</button>
    <button @click="incrementN({ n: 3 })">加N</button>
    <button @click="waitIncrement">2s后加</button>
    <button @click="waitIncrementN({ n: 5 })">2s后加N</button>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  name: "Count",
  data() {
    return {};
  },
  computed: {
    ...mapState("count", ["count"]),
     ...mapState("movie", ["movieList"]),
  },
  methods: {
    ...mapMutations("count", ["increment", "decrement", "incrementN"]),
    ...mapActions("count", ["waitIncrement", "waitIncrementN"]),
  },
};
</script>

<style scoped>
.outer {
  width: 300px;
  border-radius: 20px;
  display: flex;
  background-color: #3cf;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid rgb(0, 0, 0);
}
</style>